<template>
  <div class="main-layout">
    <!-- 左侧：今日任务表格 -->
    <div class="main-content">
      <!-- 页面头部 -->
      <el-card class="header-card">
        <div class="header-content">
          <div class="title-section">
            <h1 class="main-title">
              <el-icon class="title-icon"><Document /></el-icon>
              今日任务管理
            </h1>
            <div class="subtitle">高效管理，精准执行</div>
          </div>
          <div class="date-section">
            <div class="date">{{ currentDateComputed }}</div>
            <div class="time-greeting">{{ getTimeGreeting() }}</div>
          </div>
        </div>
      </el-card>
      
      <div class="content">
        <!-- 进度展示区域 -->
        <el-card class="progress-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><TrendCharts /></el-icon>
              <span class="header-title">执行进度</span>
            </div>
          </template>
          
          <div class="progress-content">
            <div class="progress-compact">
              <div class="progress-left">
                <div class="progress-stats">
                  <span class="stat-completed">{{ completedCount }}</span>
                  <span class="stat-divider">/</span>
                  <span class="stat-total">{{ plans.length }}</span>
                  <span class="stat-label">任务</span>
                </div>
                <div class="progress-status">{{ getProgressMessage() }}</div>
              </div>
              
              <div class="progress-right">
                <div class="progress-circle">
                  <el-progress 
                    type="circle"
                    :percentage="completionRate"
                    :width="60"
                    :stroke-width="6"
                    :status="completionRate === 100 ? 'success' : ''"
                    class="circle-progress"
                  >
                    <template #default="{ percentage }">
                      <span class="circle-text">{{ percentage }}%</span>
                    </template>
                  </el-progress>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 任务表格 -->
        <el-card class="task-card">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><List /></el-icon>
              <span class="header-title">任务清单</span>
              <div class="header-extra">
                <el-tag type="success" size="small">已完成: {{ completedCount }}</el-tag>
                <el-tag type="warning" size="small">待完成: {{ plans.length - completedCount }}</el-tag>
              </div>
            </div>
          </template>
          
          <div class="table-container">
            <el-table 
              :data="plans" 
              border 
              style="width: 100%"
              :height="tableHeight"
              empty-text="暂无任务数据"
            >
              <el-table-column prop="content" label="任务内容" min-width="350">
                <template #default="{ row }">
                  <div class="task-content">
                    <el-icon class="task-status-icon" :class="getTaskStatusClass(row.status)">
                      <component :is="getTaskIcon(row.status)" />
                    </el-icon>
                    <el-select
                      v-if="row.type === 'select'"
                      v-model="row.selected"
                      placeholder="请选择"
                      style="width: 180px"
                      @change="val => updateTaskSelect(row, val)"
                    >
                      <el-option
                        v-for="item in row.options"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                    <span v-else class="task-text">{{ row.content }}</span>
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column label="状态" width="120" align="center">
                <template #default="{ row }">
                  <div class="status-column">
                    <el-progress
                      v-if="row.progress !== undefined"
                      :percentage="row.progress"
                      :text-inside="true"
                      :stroke-width="16"
                      status="success"
                      style="width: 100px; margin-bottom: 8px;"
                    />
                    <el-tag 
                      :type="getStatusTagType(row.status)" 
                      :effect="row.status === 'completed' || row.status === '已完成' ? 'dark' : 'plain'"
                      size="small"
                      class="status-tag"
                    >
                      {{ STATUS_MAP_REVERSE[row.status] ? STATUS_MAP_REVERSE[row.status] : row.status }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column label="操作" width="180" align="center">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button 
                      size="small" 
                      @click="editTask(row)"
                      class="action-btn edit-btn"
                      :icon="Edit"
                    >
                      编辑
                    </el-button>
                    <el-button 
                      size="small" 
                      type="primary"
                      @click="toggleTaskStatus(row)"
                      class="action-btn status-btn"
                      :icon="row.status === 'completed' || row.status === '已完成' ? RefreshLeft : Check"
                    >
                      {{ (row.status === 'completed' || row.status === '已完成') ? '重置' : '完成' }}
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 添加任务区域 -->
          <div class="add-task-section">
            <div class="add-task-form">
              <el-input 
                v-model="newTaskContent" 
                placeholder="输入新任务内容..." 
                class="task-input"
                @keyup.enter="addTask"
              >
                <template #prefix>
                  <el-icon><EditPen /></el-icon>
                </template>
              </el-input>
              <el-button 
                type="primary" 
                @click="addTask" 
                class="add-button"
                :icon="Plus"
              >
                添加任务
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 完成提示卡片 -->
        <transition name="completion-fade">
          <el-card v-if="plans.length > 0 && completedCount === plans.length" class="completion-card">
            <div class="completion-content">
              <div class="completion-icon">
                <el-icon><SuccessFilled /></el-icon>
              </div>
              <div class="completion-text">
                <div class="completion-title">恭喜！今日任务全部完成</div>
                <div class="completion-desc">所有计划任务已圆满完成，继续保持这种高效状态</div>
              </div>
            </div>
          </el-card>
        </transition>
      </div>
    </div>

    <!-- 编辑任务对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑任务"
      width="450px"
      :before-close="handleClose"
      class="custom-dialog"
    >
      <el-form :model="editingTask" label-width="80px">
        <el-form-item label="任务内容">
          <el-input v-model="editingTask.content" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editingTask.status" style="width: 100%">
            <el-option 
              v-for="(cn, en) in STATUS_MAP_REVERSE" 
              :key="en" 
              :label="cn" 
              :value="en" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveTaskEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 右侧面板 -->
    <div class="side-panel">
      <!-- 日历组件 -->
      <el-card class="calendar-card">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon"><Calendar /></el-icon>
            <span class="header-title">日历概览</span>
          </div>
        </template>
        
        <div class="calendar-container">
          <el-calendar v-model="currentDate" :fullscreen="false">
            <template #dateCell="{ data }">
              <div class="calendar-cell" :class="{ 'has-check': shouldShowCheck(data.day) }">
                <span class="date-number">{{ data.day.split('-').slice(2).join('') }}</span>
                <div v-if="shouldShowCheck(data.day)" class="check-mark">
                  <el-icon><Check /></el-icon>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
      </el-card>

      <!-- 名人名言组件 -->
      <el-card class="quote-card">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon"><ChatDotRound /></el-icon>
            <span class="header-title">每日箴言</span>
            <el-button 
              size="small" 
              text 
              @click="refreshQuote"
              class="refresh-btn"
              :icon="Refresh"
            >
              换一句
            </el-button>
          </div>
        </template>
        
        <div class="quote-content">
          <div class="quote-text">
            <div class="quote-mark-left">"</div>
            <p class="quote-main">{{ currentQuote.text }}</p>
            <div class="quote-mark-right">"</div>
          </div>
          <div class="quote-author">
            <span class="author-name">— {{ currentQuote.author }}</span>
          </div>
          <div class="quote-category">
            <el-tag size="small" type="info" effect="plain">{{ currentQuote.category }}</el-tag>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { 
  Check, 
  Edit, 
  RefreshLeft, 
  Plus, 
  EditPen,
  Document,
  TrendCharts,
  List,
  Calendar,
  SuccessFilled,
  CircleCheck,
  Remove,
  Warning,
  ChatDotRound,
  Refresh
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 名人名言数据
const quotes = ref([
  {
    text: "成功不是终点，失败也不是末日，最重要的是继续前进的勇气。",
    author: "温斯顿·丘吉尔",
    category: "励志"
  },
  {
    text: "今日事今日毕，明日自有明日忧。",
    author: "富兰克林",
    category: "效率"
  },
  {
    text: "时间是世界上一切成就的土壤。",
    author: "爱默生",
    category: "时间"
  },
  {
    text: "专注是成功的第一要素。",
    author: "比尔·盖茨",
    category: "专注"
  },
  {
    text: "行动胜过千言万语。",
    author: "巴尔扎克",
    category: "行动"
  },
  {
    text: "昨天已经过去，明天充满未知，今天是上帝赐予我们的礼物。",
    author: "比尔·基恩",
    category: "当下"
  },
  {
    text: "成功的秘诀在于坚持自己的目标。",
    author: "本杰明·迪斯雷利",
    category: "坚持"
  },
  {
    text: "机会只偏爱有准备的头脑。",
    author: "巴斯德",
    category: "机会"
  },
  {
    text: "知识改变命运，努力改变结果。",
    author: "李嘉诚",
    category: "学习"
  },
  {
    text: "不积跬步，无以至千里；不积小流，无以成江海。",
    author: "荀子",
    category: "积累"
  },
  {
    text: "业精于勤荒于嬉，行成于思毁于随。",
    author: "韩愈",
    category: "勤奋"
  },
  {
    text: "路漫漫其修远兮，吾将上下而求索。",
    author: "屈原",
    category: "探索"
  }
])

const currentQuote = ref({})

// 状态映射
const STATUS_MAP = {
  '未完成': 'pending',
  '已完成': 'completed',
  '已跳过': 'skipped',
  'pending': 'pending',
  'completed': 'completed',
  'skipped': 'skipped'
}

const STATUS_MAP_REVERSE = {
  pending: '未完成',
  completed: '已完成',
  skipped: '已跳过',
  '未完成': '未完成',
  '已完成': '已完成',
  '已跳过': '已跳过'
}

const plans = ref([])
const loading = ref(true)
const newTaskContent = ref('')
const currentDate = ref(new Date())
const completedDays = ref([])
const editDialogVisible = ref(false)
const editingTask = ref({})

// 刷新名言的方法
const refreshQuote = () => {
  const randomIndex = Math.floor(Math.random() * quotes.value.length)
  currentQuote.value = quotes.value[randomIndex]
}

// 计算表格高度
const tableHeight = computed(() => {
  const rowHeight = 54 // 每行大约54px
  const headerHeight = 48 // 表头高度
  const minHeight = 200 // 最小高度
  const maxHeight = 600 // 最大高度
  
  const calculatedHeight = headerHeight + (plans.value.length * rowHeight)
  
  if (calculatedHeight < minHeight) return minHeight
  if (calculatedHeight > maxHeight) return maxHeight
  
  return calculatedHeight
})

// 新增的方法
const getTimeGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 6) return "深夜时光，注意休息"
  if (hour < 9) return "早上好，新的一天开始了"
  if (hour < 12) return "上午好，保持专注"
  if (hour < 14) return "中午好，适当休息"
  if (hour < 18) return "下午好，继续努力"
  if (hour < 22) return "晚上好，今天辛苦了"
  return "夜深了，早点休息"
}

const getProgressMessage = () => {
  const rate = completionRate.value
  if (rate === 0) return "开始执行今日计划"
  if (rate < 30) return "进展良好，继续保持"
  if (rate < 60) return "执行顺利，稳步推进"
  if (rate < 90) return "即将完成，最后冲刺"
  if (rate < 100) return "胜利在望，坚持到底"
  return "任务完成，执行优秀"
}

const getTaskIcon = (status) => {
  const statusKey = STATUS_MAP[status] || status
  switch (statusKey) {
    case 'completed': return CircleCheck
    case 'skipped': return Remove
    default: return Warning
  }
}

const getTaskStatusClass = (status) => {
  const statusKey = STATUS_MAP[status] || status
  switch (statusKey) {
    case 'completed': return 'completed'
    case 'skipped': return 'skipped'
    default: return 'pending'
  }
}

const getStatusTagType = (status) => {
  const statusKey = STATUS_MAP[status] || status
  switch (statusKey) {
    case 'completed': return 'success'
    case 'skipped': return 'info'
    default: return 'warning'
  }
}

const getDailyReminder = () => {
  const reminders = [
    "专注当下，高效执行每一项任务",
    "保持良好的工作节奏和状态",
    "及时记录和更新任务进展",
    "合理安排时间，确保任务质量",
    "坚持不懈，成功源于持续行动"
  ]
  const today = new Date().getDate()
  return reminders[today % reminders.length]
}

const currentDateComputed = computed(() => {
  const now = new Date()
  const week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
  return `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日 ${week[now.getDay()]}`
})

const completedCount = computed(() => plans.value.filter(t => {
  const status = STATUS_MAP[t.status] || t.status
  return status === 'completed' || t.status === '已完成'
}).length)

const completionRate = computed(() => {
  const total = plans.value.length
  const completed = plans.value.filter(t => {
    const status = STATUS_MAP[t.status] || t.status
    return status === 'completed' || t.status === '已完成'
  }).length
  return total > 0 ? Math.round((completed / total) * 100) : 0
})

const checkLoginStatus = () => {
  const userId = userStore.userId
  if (!userId) {
    ElMessage.error('请先登录')
    router.push('/login')
    return null
  }
  return userId
}

const fetchTodayPlans = async (dateObj) => {
  const userId = checkLoginStatus()
  if (!userId) return
  loading.value = true
  try {
    const date = dateObj || new Date()
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const dateStr = `${year}-${month}-${day}`

    const { data } = await axios.get(`/api/daily-tasks/user/${userStore.username}`, {
      params: { date: dateStr }
    })
    
    plans.value = data.filter(task => {
      if (!task.taskDate) return false
      const taskDate = new Date(task.taskDate).setHours(0, 0, 0, 0)
      const selectedDate = new Date(dateStr).setHours(0, 0, 0, 0)
      return taskDate === selectedDate
    }).map(task => ({
      ...task,
      type: task.type || '',
      options: task.options || [],
      selected: task.selected || '',
      progress: task.progress
    }))
  } catch (error) {
    ElMessage.error('获取任务失败')
  } finally {
    loading.value = false
  }
}

const fetchCompletedDays = async () => {
  const userId = checkLoginStatus()
  if (!userId) return
  try {
    const year = currentDate.value.getFullYear()
    const month = String(currentDate.value.getMonth() + 1).padStart(2, '0')
    const day = String(currentDate.value.getDate()).padStart(2, '0')
    const dateStr = `${year}-${month}-${day}`

    const response = await axios.get(`/api/daily-tasks/user/${userStore.username}`,{
      date: dateStr
    })

    completedDays.value = response.data
  } catch (error) {
    completedDays.value = []
  }
}

const fetchUnfinishedHistoryTasks = async () => {
  // 移除历史待办功能
}

function shouldShowCheck(date) {
  const dateStr = date.split('T')[0]
  const today = new Date()
  const year = today.getFullYear()
  const month = String(today.getMonth() + 1).padStart(2, '0')
  const day = String(today.getDate()).padStart(2, '0')
  const todayStr = `${year}-${month}-${day}`
  
  if (dateStr === todayStr) {
    const hasTasks = plans.value && plans.value.length > 0
    const allCompleted = hasTasks && plans.value.every(task => {
      const status = STATUS_MAP[task.status] || task.status
      return status === 'completed' || task.status === '已完成'
    })
    return allCompleted
  }
  return false
}

const addTask = async () => {
  if (!newTaskContent.value.trim()) {
    ElMessage.warning('请输入任务内容')
    return
  }

  try {
    const date = currentDate.value
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const formattedDate = `${year}-${month}-${day}`

    const response = await axios.post('/api/daily-tasks/add', {
      content: newTaskContent.value,
      userId: userStore.userId,
      taskDate: formattedDate,
      status: 'pending'
    })
    newTaskContent.value = ''
    if (response.status === 200) {
      ElMessage.success('任务添加成功')
      await fetchTodayPlans(currentDate.value)
    } else {
      ElMessage.error('添加任务失败')
    }
  } catch (error) {
    newTaskContent.value = ''
    const errorMessage = error.response?.data?.message || error.response?.data || '添加任务失败'
    if (typeof errorMessage === 'string' && errorMessage.includes('没有可用的学习计划')) {
      ElMessage.warning('请先创建学习计划')
      router.push('/study-plan/create')
    } else {
      ElMessage.error(typeof errorMessage === 'string' ? errorMessage : '添加任务失败')
    }
  }
}

const toggleTaskStatus = async (task) => {
  try {
    const currentStatus = STATUS_MAP[task.status] || task.status
    const isCompleted = currentStatus === 'completed' || task.status === '已完成'
    const newStatus = isCompleted ? 'pending' : 'completed'
    const requestData = {
      taskId: task.taskId,
      userId: userStore.userId,
      status: newStatus,
      content: task.content,
      taskDate: task.taskDate || new Date().toISOString().split('T')[0]
    }
    
    const response = await axios.put(`/api/daily-tasks/update`, requestData)
    
    if (response.data !== 1) {
      throw new Error('更新任务状态失败：服务器返回非预期值')
    }
    
    task.status = newStatus
    
    ElMessage.success(newStatus === 'completed' ? '任务完成' : '任务已重置')
  } catch (error) {
    const errorMessage = error.response?.data?.message || error.message || '更新任务状态失败'
    ElMessage.error(errorMessage)
    
    const currentStatus = STATUS_MAP[task.status] || task.status
    const isCompleted = currentStatus === 'completed' || task.status === '已完成'
    task.status = isCompleted ? 'pending' : 'completed'
  }
}

const editTask = (task) => {
  editingTask.value = { ...task }
  editDialogVisible.value = true
}

const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭？未保存的修改将会丢失')
    .then(() => {
      done()
    })
    .catch(() => {})
}

const saveTaskEdit = async () => {
  try {
    await axios.put(`/api/daily-tasks/update`, {
      taskId: editingTask.value.taskId,
      userId: userStore.userId,
      status: editingTask.value.status,
      content: editingTask.value.content
    })
    ElMessage.success('保存成功')
    editDialogVisible.value = false
    await fetchTodayPlans(currentDate.value)
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

const updateTaskSelect = async (task, value) => {
  ElMessage.info(`选择了：${value}`)
}

watch(currentDate, (val) => {
  fetchTodayPlans(val)
})

onMounted(() => {
  fetchTodayPlans(currentDate.value)
  // 初始化名言
  refreshQuote()
})
</script>

<style scoped>
/* 主布局 - 增加背景纹理 */
.main-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  min-height: 100vh;
  background: 
    radial-gradient(circle at 20% 80%, rgba(64, 158, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(103, 194, 58, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, #f5f7fa 0%, #f8fafe 100%);
  position: relative;
}

.main-layout::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(64, 158, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(103, 194, 58, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.main-content {
  flex: 1.5;
  min-width: 600px;
  max-width: 900px;
}

.side-panel {
  flex: 1;
  min-width: 300px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 卡片通用样式 - 增加美化效果 */
.header-card,
.progress-card,
.task-card,
.calendar-card,
.completion-card,
.quote-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e7ed;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.header-card::before,
.progress-card::before,
.task-card::before,
.calendar-card::before,
.quote-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #409eff, #66b1ff, #409eff);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.header-card:hover,
.progress-card:hover,
.task-card:hover,
.calendar-card:hover,
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
  position: relative;
  z-index: 1;
}

.header-icon {
  color: #409eff;
  font-size: 16px;
  padding: 4px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.header-icon:hover {
  background: rgba(64, 158, 255, 0.2);
  transform: scale(1.1);
}

.header-title {
  font-size: 16px;
}

.header-extra {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.header-badge {
  margin-left: auto;
}

/* 名人名言卡片样式 */
.quote-card {
  background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.quote-card::before {
  background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe);
}

.quote-content {
  padding: 20px 0;
  position: relative;
}

.quote-text {
  position: relative;
  margin-bottom: 20px;
  padding: 0 20px;
}

.quote-mark-left,
.quote-mark-right {
  font-size: 48px;
  font-weight: bold;
  color: rgba(64, 158, 255, 0.3);
  position: absolute;
  line-height: 1;
  font-family: Georgia, serif;
}

.quote-mark-left {
  top: -10px;
  left: 0;
}

.quote-mark-right {
  bottom: -30px;
  right: 0;
}

.quote-main {
  font-size: 16px;
  line-height: 1.8;
  color: #2c3e50;
  margin: 0;
  text-align: center;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  padding: 10px 0;
}

.quote-author {
  text-align: right;
  margin-bottom: 12px;
}

.author-name {
  font-size: 14px;
  color: #606266;
  font-style: italic;
  font-weight: 500;
}

.quote-category {
  text-align: center;
}

.refresh-btn {
  margin-left: auto;
  color: #409eff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: rgba(64, 158, 255, 0.1);
  transform: rotate(180deg);
}

/* 页面头部 - 增加渐变背景 */
.header-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  position: relative;
  z-index: 1;
}

.title-section .main-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.title-icon {
  color: #409eff;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(64, 158, 255, 0.3));
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.date-section {
  text-align: right;
}

.date {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.time-greeting {
  font-size: 14px;
  color: #606266;
}

/* 进度卡片 - 紧凑版 */
.progress-content {
  padding: 12px 0;
}

.progress-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.progress-left {
  flex: 1;
}

.progress-stats {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.stat-completed {
  font-size: 28px;
  font-weight: 700;
  color: #409eff;
  line-height: 1;
}

.stat-divider {
  font-size: 20px;
  color: #dcdfe6;
  margin: 0 2px;
}

.stat-total {
  font-size: 24px;
  font-weight: 600;
  color: #606266;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.progress-status {
  font-size: 13px;
  color: #606266;
  font-style: italic;
}

.progress-right {
  display: flex;
  align-items: center;
}

.progress-circle {
  position: relative;
}

.circle-text {
  font-size: 12px;
  font-weight: 600;
  color: #409eff;
}

/* 任务表格 - 增加微妙动画 */
.table-container {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.4), transparent);
  animation: tableLoading 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes tableLoading {
  0% { left: -100%; }
  100% { left: 100%; }
}

.task-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-status-icon {
  font-size: 16px;
}

.task-status-icon.pending {
  color: #e6a23c;
}

.task-status-icon.completed {
  color: #67c23a;
}

.task-status-icon.skipped {
  color: #909399;
}

.task-text {
  font-size: 14px;
  line-height: 1.5;
}

.status-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.status-tag {
  font-size: 12px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.6s ease;
  transform: translate(-50%, -50%);
}

.action-btn:hover::before {
  width: 100px;
  height: 100px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.edit-btn {
  background: #f4f4f5;
  border-color: #d3d4d6;
  color: #606266;
}

.edit-btn:hover {
  background: #e1e3e4;
  border-color: #c0c4cc;
}

.status-btn {
  background: #409eff;
  border-color: #409eff;
}

.status-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

/* 添加任务 */
.add-task-section {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.add-task-form {
  display: flex;
  gap: 12px;
}

.task-input {
  flex: 1;
}

.add-button {
  background: #409eff;
  border-color: #409eff;
  padding: 8px 20px;
}

.add-button:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

/* 完成提示卡片 - 增加庆祝动画 */
.completion-card {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  border: none;
  color: white;
  box-shadow: 0 8px 25px rgba(103, 194, 58, 0.3);
  animation: completionEntrance 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes completionEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.completion-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  position: relative;
}

.completion-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: completionShine 2s ease-in-out infinite;
}

@keyframes completionShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.completion-icon {
  font-size: 48px;
  color: white;
  animation: iconBounce 1s ease-in-out infinite alternate;
}

@keyframes iconBounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.completion-text {
  flex: 1;
}

.completion-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.completion-desc {
  font-size: 14px;
  opacity: 0.9;
}

.completion-fade-enter-active,
.completion-fade-leave-active {
  transition: all 0.5s ease;
}

.completion-fade-enter-from,
.completion-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 日历组件 - 增加微妙的3D效果 */
.calendar-container {
  position: relative;
}

.calendar-cell {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.calendar-cell:hover {
  background: linear-gradient(135deg, #f0f9ff, #e1f3ff);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.date-number {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  transition: all 0.3s ease;
}

.calendar-cell:hover .date-number {
  color: #409eff;
  transform: scale(1.05);
}

.check-mark {
  position: absolute;
  bottom: 2px;
  right: 2px;
  color: #67c23a;
  font-size: 12px;
  animation: checkPulse 2s ease-in-out infinite;
}

@keyframes checkPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.has-check {
  background: linear-gradient(135deg, #f0f9ff, #e1f3ff);
  border: 1px solid #409eff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.has-check .date-number {
  color: #409eff;
  font-weight: 600;
}

/* 历史任务 */
.empty-history {
  padding: 32px 0;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  color: #67c23a;
}

.history-list {
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.history-item:hover {
  background: #f8f9fa;
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: 4px;
}

.history-item:last-child {
  border-bottom: none;
}

.history-content {
  flex: 1;
  min-width: 0;
}

.history-task {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
  word-break: break-word;
}

.history-date {
  font-size: 12px;
  color: #909399;
}

.history-complete-btn {
  background: #67c23a;
  border-color: #67c23a;
  color: white;
}

.history-complete-btn:hover {
  background: #85ce61;
  border-color: #85ce61;
}

/* 每日提醒 */
.reminder-content {
  padding: 16px 0;
}

.reminder-text {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
  text-align: center;
  font-style: italic;
}

/* 对话框 */
.custom-dialog :deep(.el-dialog) {
  border-radius: 8px;
}

.custom-dialog :deep(.el-dialog__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
}

.custom-dialog :deep(.el-dialog__title) {
  color: #303133;
  font-weight: 600;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Element Plus 组件样式覆盖 - 增强视觉效果 */
:deep(.el-progress-bar__outer) {
  border-radius: 6px;
  background-color: #f0f2f5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-progress-bar__inner) {
  border-radius: 6px;
  background: linear-gradient(90deg, #409eff, #66b1ff);
  box-shadow: 0 1px 3px rgba(64, 158, 255, 0.3);
}

:deep(.el-progress--circle .el-progress__text) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-table) {
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #fafafa, #f5f5f5);
  color: #606266;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

:deep(.el-table td) {
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

:deep(.el-table tr:hover td) {
  background: linear-gradient(135deg, #f8fafe, #f0f9ff);
}

:deep(.el-table--border) {
  border: 1px solid #ebeef5;
}

:deep(.el-input__wrapper) {
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

:deep(.el-button--small) {
  font-size: 12px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-calendar) {
  border: none;
  background: transparent;
}

:deep(.el-calendar__header) {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fafafa, #f5f5f5);
  border-radius: 6px 6px 0 0;
}

:deep(.el-calendar__button-group) {
  display: flex;
  justify-content: center;
}

:deep(.el-calendar-table) {
  table-layout: fixed;
}

:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
  height: 40px;
}

:deep(.el-calendar-table td) {
  border: 1px solid #f5f5f5;
  transition: border-color 0.3s ease;
}

:deep(.el-calendar-table td:hover) {
  border-color: rgba(64, 158, 255, 0.3);
}

:deep(.el-tag) {
  border-radius: 12px;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-layout {
    flex-direction: column;
    gap: 20px;
  }
  
  .main-content {
    min-width: auto;
    max-width: none;
  }
  
  .side-panel {
    min-width: auto;
    max-width: none;
    flex-direction: row;
    gap: 20px;
  }
  
  .side-panel > * {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .main-layout {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .date-section {
    text-align: left;
  }
  
  .title-section .main-title {
    font-size: 24px;
  }
  
  .progress-stats {
    gap: 16px;
  }
  
  .side-panel {
    flex-direction: column;
  }
  
  .add-task-form {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .dialog-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .dialog-footer .el-button {
    width: 100%;
  }
}
</style>